10分钟，前端工程师也能玩转区块链Web3.js开发

一个不想写后台的前端不是一个好全栈，前端也可以玩转区块链Web3.js开发。

老吴（北京志顶科技有限公司技术总监、区块链专家）针对前端工程师如何玩转Web3.js开发后端钱包这一主题，分享了自己开发后端钱包的实战经历，并慷慨地奉献了全部代码，给予了前端工程师一个近距离接触区块链开发的契机。

那么，一个前端工程师为什么要接触区块链？如何利用Web3.js开发后端红包的呢？在以太坊开发实战中，应该了解哪些概念？老吴又会在Web3.js编码方面分享给我们一些什么干货呢？希望以下内容对你有所帮助。

作者 | 老吴（北京志顶科技有限公司技术总监、区块链专家）

整理 | kou

以下为老吴在CSDN主办，区块链大本营、EthFans、柏链道捷（PDJ Education）、极客帮创投协办的「第 7 期 CSDN 区块链技术沙龙」上的发言内容，区块链大本营在不改变原意的情况下作了精心整理。

目前，有很多前端工程师存在后端转型需求，部分人还致力于向全栈工程师发展，而结合以太坊Web3会让这种转型变得更加容易，更有机会，因为区块链以太坊开发者属于稀缺性人才。

我今天主要分享的是我个人在区块链DApp开发中的实战经历，一个前端工程师如何成功转型做后端？又如何基于Web3.js开发一个后端钱包呢？

首先，我会带大家了解一下Web3和Web3.js到底是什么，在以太坊开发过程中，我们需要掌握哪些常用的基本概念；

其次，我会重点讲一下Web3.js的两个版本（v 0.2x.x和v1.0-beta），尤其是v1.0-beta，我会详细的介绍v1.0-beta的模块功能；

在这之后，我会简单分享一下Web3.js编码阶段中的一些干货；

最后，和我一起，开始Web3.js开发实战吧！

Web3.js究竟是什么

Web3的前世今生

Web时代的互联网主要用于传递信息，是信息的载体。

Web2.0开启了Web交互大时代，涌现出了很多优秀的交互平台及产品。

以太坊的出现重新定义了Web3，使之成为基于区块链进行价值传递的基础网络与价值网络。

一个JavaScript库

Web3.js是以太坊提供的一个JavaScript库，它封装了以太坊的RPC通信API，提供了一系列与区块链交互方法，使JavaScript与以太坊交互变得简单。

以太坊节点通过JSON-RPC提供外部访问接口，Web3.js是基于JavaScript和Node.js的JSON-RPC封装

JSON-RPC是一个无状态、轻量级的远程过程调用协议（RPC），与传输协议无关，可使用socket、HTTP或者其它协议，它使用JSON（RFC4627）作为数据格式。

基本概念

那么，在学习以太坊开发过程中，我们需要了解哪些概念呢？主要包括以下四点：区块（Block）、交易（Transaction）、合约（Contract）和账户（Account）。

区块、交易和账户

以太坊中区块是交易的载体，而交易则记载了账户间的信息互动。智能合约则是运行在以太坊虚拟机（EVM）上的应用。

区块：是交易的载体，包含区块数（blockNumber）、块哈希（blockHash）、交易等属性；

交易：包含在区块中，包含发起方（from）、交易对手方（to）、交易金额（Value）、哈希（Hash）等属性；

账户：账户和智能合约一样都是以太坊作为第二代区块链的标志，说到账户会包含很多概念，是账户私钥的密文，我们可以通过密码（password）解密私钥，只有拿到私钥之后才能对交易进行签名。

这里需要着重强调是，以太坊交易的状态保存在交易凭证（TransactionReceipt）中，而且即使交易被12次确认也不意味着交易在业务层面的成功，这只代表交易已经被矿工打包并在以太坊虚拟机上执行。

举一个例子，如果一个用户账户上除了以太币（ETH）之外还有其他代币，我们发起了一笔TPC（代币定价活动）的代币转账交易。此时，交易会被正常挖矿打包并得到确认，但是最终的交易结果却是失败，因为用户账户上的余额不足。

合约

合约：运行在以太坊的应用，既然是应用那么就包含编码、编译、部署、执行等方面，智能合约的出现使得人人都可以拥有自己的代币（Token Coin）。

对于Web3.js开发者而言，与合约打交道的时候很多，假如我们发行了一个ERC20的代币，想要查询某一账户该代币的余额则就需要在合约层面执行ERC20合约的标准方法balanceOf，而转账交易则需要调用合约里的transfer函数。

一起来解剖Web3.js？

v 0.2x.x

v0.2x.x对于JSONRPC的封装不够完善，基于v0.2x.x开发我们不得不借助一些第三方的封装，比如: accounts，v0.2x.x官方文档中就推荐使用第三方的accounts封装。

这里我们不是说第三方的封装就不能用或者比官方的封装差，而这从侧面反应了v0.2x.x的不完善，这并不利于我们的后续开发和维护，会提供我们的开发成本降低我们的开发效率。

v1.0-beta

在我们的钱包开发选型时，综合各种因素，最终选择了Web3.js v1.0。即使在开发基于Web的以太坊应用时，有条件的情况下，我也建议大家选用1.0，我们可以基于express构建Node.js Webserver来给我们的Web应用提供服务。

我开发的钱包服务共有三大服务，监听服务、交易服务和HTTP服务，其中HTTP服务就是基于express构建的，结合Spring Cloud / Nodejs client注册到交易网关上，提供了非常稳定的服务支撑。

安全也是一个非常重要的因素，前段时间以太坊爆出一个非常严重的安全问题，某些应用开发者通过unlockAccount方式解锁账户以便于基于该解锁账户进行各类交易，但是交易完成后并没有lockAccount，那么这一波漏洞被有心的黑客发现并利用，不间断的盗取了unlockAccount上的大量以太坊，造成了巨大损失。

Web3.js对象包含以太坊开发的一些基本单元，其中Eth和Utils为最常用的单元。Eth单元中则封装以太坊交易的核心模块，包括Subscribe、Contract、Accounts、Iban、Abi等。

Subscribe – 订阅接口，可以通过该模块的接口订阅/监听新区块、日志等，注意该模块为WebSocket模式独有；

Contract – 合约接口，与智能合约部署、调用相关，开发Token类应用(或者DAPP)的玩家多多关注；；

Accounts – 账户接口，用户新建账户、账户交易签名等等

Abi – 主要用于以太坊执行智能合约函数的数据编码，后续会详细分享。

你想知道的一些干货！

钱包节点

安装以太坊官方钱包(安装后包含geth节点)

下载地址:https://github.com/ethereum/mist/releases

我们不论进行哪类开发，都需要部署开发环境，运行一个demo输出一个hello world! 详见https://Node.js.org/en/

Web3.js开发也不例外，也需要部署开发环境。其实部署以太坊开发环境非常简单，只需要我们下载一个以太坊官方钱包，并以正确的命令启动geth就可以了。

钱包包含两部分，以太坊节点geth和钱包管理客户端Ethereum Wallet

Etherscan

Etherscan是以太坊官方推出的区块链浏览器、以太坊统计分析平台、去中心化智能合约平台，里边包罗万象是我们进行以太坊开发的好助手。可以查询交易、查询账户、查询合约、查询合约交易、查询正在打包的交易、查询交易打包时间等等。

需要注意的是，使用ehterscan的时候要分清我们是在哪个网络上做的交易。

交易

预计算的Gas与交易实际使用的Gas可能是不同，最主要的原因在于某些交易在以太坊执行的时候，Gas是根据执行函数的参数动态调整的。Number used once或Number once的缩写，在密码学中Nonce是一个只被使用一次的任意或非重复的随机数值。

gasPrice是需要我们谨慎对待的参数，因为在gasLimit一定的情况下，gasPrice越高交易就会被矿工越早打包，在不同的业务场景我们可以适当调整gasPrice的取值，通常的做法是在默认gasPrice上提高10%。

常见交易错误

接下来，我们看一下运行以下代码返回的一些错误：

out of gas：你给的矿工费不够, 提高gasLimit

Insufficient funds forgas * price + value ：交易发送账户的以太坊余额不够了，或者是你的以太坊余额不足以支付矿工费了（合约部署、通证转账）

not mined within 50blocks(Transaction was not mined within750 seconds)：对不起，矿工很忙，挖矿打包要排队，最近50块可能轮不到你的交易了，但是这并不意味着你的交易会失败，那会不会打包呢？通常是会被打包的，只是等的时间长而已。记录transactionHash可以通过etherscan查看交易状态，也可以额外写个程序通过getTransaction/getTransactionReceipt获取最终交易状态

手把手带你开发后端红包

Web3实例化及账户余额查询

对于以太坊来说查询交易是开放的，不需要基于账户进行交易签名。

JavaScript中数字的最大长度−9007199254740992 and 9007199254740992 （即正负2的53次方），超过这个区间的数字需要转换为BigNumber操作。

账户Token余额查询

以下为ERC20 Token余额查询的代码实例：

以太坊转账交易

LoadAccount是我们进行以太坊转账交易的基础。Nonce默认值为getTransactionCount。

1）载入以太坊账户

2）获取Nonce，以太坊转账

Token（通证）转账交易

1）dataEncoder

这是一个通用的智能合约ABI函数数据编码处理类，主要是调用web3.eth.abi.encodeFunctionCall对智能合约函数进行数据打包，而打包的数据则作为转账交易的参数。换句话讲就是，告诉EVM执行合约的哪个函数参数是怎样的。

2）EstimateGas

ContractWrapper是对基础合约函数的封装，这段代码封装了计算执行合约交易所需的Gas。主要调用myContract.methods.myMethod([param1[,param2[, ...]]]).estimateGas(options[, callback])

3）transfer

我们为什么要计算Gas？为什么不直接把gasLimit设置为4000000上限？因为以太坊交易是基于gasLimit先扣取费用的，如果所有交易都设置为gas上限，可以想象如果发起多笔交易的时候，对账户的ether余额来说是有相当压力的。

最后，附上以上分享的项目代码：https://github.com/nerverwind/web3-example

作者简介：

老吴，北京志顶科技有限公司技术总监（前端），区块链专家，资深全栈工程师。长期从事区块链应用开发研究，有丰富的Java、PHP、Javascript、Node.js区块链实战经验，近期主要基于Node.js进行以太坊钱包服务开发。

注：本文为区块链大本营（ID：blockchain_camp）原创，未经授权不得擅自转载，如要转载请联系营长，微信：qk15732632926

最新热文：

扫码加入区块链大本营读者群，群满加微信 17600222208 入群

了解更多区块链技术及应用内容

敬请关注：